<template>
	<view>
		<uv-drop-down
			ref="dropDown"
			sign="dropDown_1"
			text-active-color="#3c9cff"
			:extra-icon="{ name: 'arrow-down-fill', color: '#666', size: '26rpx' }"
			:extra-active-icon="{ name: 'arrow-up-fill', color: '#3c9cff', size: '26rpx' }"
			:defaultValue="defaultValue"
			:custom-style="{ padding: '0 30rpx' }"
			@click="selectMenu"
		>
			<uv-drop-down-item name="order" type="2" :label="dropItem('order').label" :value="dropItem('order').value"></uv-drop-down-item>
		</uv-drop-down>
		<uv-drop-down-popup
			sign="dropDown_1"
			:click-overlay-on-close="true"
			:currentDropItem="currentDropItem"
			:zTabHeigth="42"
			@clickItem="clickItem"
			@popupChange="change"
			:zIndex="9999"
		></uv-drop-down-popup>
	</view>
</template>
<script>
export default {
	onPageScroll() {
		// 滚动后及时更新位置
		this.$refs.dropDown.init();
	},
	computed: {
		dropItem(name) {
			return (name) => {
				const result = {};
				const find = this.result.find((item) => item.name === name);
				if (find) {
					result.label = find.label;
					result.value = find.value;
				} else {
					result.label = this[name].label;
					result.value = this[name].value;
				}
				return result;
			};
		},
		// 获取当前下拉筛选项
		currentDropItem() {
			return this[this.activeName];
		}
	},
	data() {
		return {
			// 表示value等于这些值，就属于默认值
			defaultValue: [0, 'all', '0'],
			// 筛选结果
			result: [{ name: 'order', label: '全部', value: 'all' }],
			activeName: 'order',
			order: {
				label: '全部',
				value: '',
				activeIndex: 0,
				color: '#333',
				activeColor: '#2878ff',
				child: [
					{
						label: '全部',
						value: 'all'
					},
					{
						label: '已付款',
						value: 'fk'
					},
					{
						label: '未付款',
						value: 'wfk'
					}
				]
			}
		};
	},
	methods: {
		change(e) {
			// console.log('弹窗打开状态：', e);
		},
		/**
		 * 点击每个筛选项回调
		 * @param {Object} e { name, active, type } = e
		 */
		selectMenu(e) {
			const { name, active, type } = e;
			this.activeName = name;
			const find = this.result.find((item) => item.name == this.activeName);
			if (find) {
				const findIndex = this[this.activeName].child.findIndex((item) => item.label == find.label && item.value == find.value);
				this[this.activeName].activeIndex = findIndex;
			} else {
				this[this.activeName].activeIndex = 0;
			}
		},
		/**
		 * 点击菜单回调处理
		 * @param {Object} item 选中项 { label,value } = e
		 */
		clickItem(e) {
			// 下面有重新赋值，所以用let
			let { label, value } = e;
			console.log('e ====> ', e);
			const findIndex = this.result.findIndex((item) => item.name == this.activeName);
			if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
				label = this[this.activeName].label;
			}
			// 已经存在筛选项
			if (findIndex > -1) {
				this.$set(this.result, findIndex, {
					name: this.activeName,
					label,
					value
				});
			} else {
				this.result.push({
					name: this.activeName,
					label,
					value
				});
			}
			// 把对应的选项返回出去
			this.result = this.result.filter((item) => this.defaultValue.indexOf(item.value) == -1);
			this.$emit('ok', this.result);
		}
	}
};
</script>
